import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom';
import { Toast, NavBar } from 'react-vant';
import axios from '../../utils/index'
import style from './index.module.css'
const Index: React.FC = () => {
  const navigate = useNavigate()
  const [tabList, setTabList] = useState([]);
  const [tabIndex, setTabIndex] = useState(0);
  const aaa = async () => {
    const res = await axios.get('/api/neitab')
    if (res.data.code == 200) {
      setTabList(res.data.neitab)
    }
  }

  useEffect(() => {
    aaa()
  }, [])
  return (
    <div className={style.box250}>
      <NavBar
        title="心理关爱"
        onClickLeft={() => navigate(-1)}
      />
      <img src="../src/assets/202_02.jpg" alt="" style={{ width: '100%', height: "450px" }} />
      <img src="../src/assets/202_03.jpg" alt="" style={{ width: '100%' }} />
      <img src="../src/assets/203_03.jpg" alt="" style={{ width: '100%' }} />
      <h2 style={{ textAlign: 'center', fontSize: '20px', color: '#e1818d', marginTop: '30px' }}>心理专家</h2>
      <p style={{ textAlign: 'center', fontSize: '16px', color: '#e1818d', }}>口碑精选 权威认证</p>



      {
        tabList && tabList.map((item: any, index: number) => (
          <div key={index}>
            {item.children.length > 0 && item.children.map((v, i) => (
              <div key={i}>
                <div className={style.box20}>
                  <div>
                    <img src={v.img} alt="" style={{ width: '70px', height: '70px', borderRadius: '50%' }} />
                  </div>
                  <div className={style.box21}>
                    <p><b>{v.name}</b>&nbsp; &nbsp;{v.zhu}</p>
                    <p>{v.yuan}</p>
                    <p>擅长:{v.shen}</p>
                    <p>
                      咨询： <span style={{ color: 'orange', fontSize: '14px' }}>{v.zi}人</span> 评分: <span style={{ color: 'orange', fontSize: '14px' }}>{v.ping}分</span>
                      <button className={style.btn}>立即咨询</button>
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        ))
      }


      {/* <div className="zysbutton-button">
                {tabList.length > 0 &&
                    tabList[tabIndex].children.map((item, index) => (
                        <div key={index}>
                            <div>
                                <dl>
                                    <dt>
                                        <img src={item.img} />
                                    </dt>
                                    <dd>
                                        <dd><b>{item.name}</b> {item.zhu}</dd>
                                        <dd>
                                            <span style={{ fontSize: '14px', color: '#000' }}>{item.yuan}</span>
                                        </dd>
                                        <dd>擅长:{item.shen}</dd>
                                        <dd>
                                            咨询： <span style={{ color: 'orange', fontSize: '14px' }}>{item.zi}人</span> 评分: <span style={{ color: 'orange', fontSize: '14px' }}>{item.ping}分</span>
                                            <button className={style.btn}>立即咨询</button>
                                        </dd>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    ))}
            </div> */}

      <button className={style.btn250}>免费测评 专业解读</button>
    </div>
  )
}

export default Index
